<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" width="640px" :title="'添加'+title" center class="dialog-concat" :close-on-click-modal="false" :close-on-press-escape	='false'>
      <el-form ref="form" label-width="72px" :model="form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="关键字:" prop="query">
              <el-input v-model="form.query" size="small" placeholder="邮箱/客户名称/客户编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户分组:" prop="typeIdWeb">
              <el-cascader size="small"
                           v-model="form.typeIdWeb"
                           class="input"
                           props.checkStrictly=true
                           change-on-select
                           :options="treeOptions"
                           :props="{ expandTrigger: 'hover',label: 'text', value: 'id', children: 'children'}"
                           @change="handleChange"></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户标签:" prop="markId">
              <el-select v-model="form.markId" placeholder="选择模板" size="small" style="width: 219px">
                <el-option value="" label="全部" hidden>全部</el-option>
                <el-option v-for="item,index in marketList" :key="item.id"
                           :value="item.id" :label="item.markName">
                  <b
                    :style="{display:'inline-block',width: '10px',height: '10px',borderRadius: '2px',backgroundColor: item.markColor,marginRight: '5px'}"></b>
                  {{item.markName}}
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 15px" class="dialog-footer">
          <el-col :span="24" align="center">
            <el-button size="mini" @click="reset">重 置</el-button>
            <el-button type="primary" size="mini" @click="search" :loading="loading">{{loading?'搜索中':'搜索'}}</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="搜索结果:">
              <el-checkbox-group v-model="checkList" >
                <el-checkbox v-for="item,index in searchList" :key="index" :label="item"
                             :title="item.linker+item.email"><span  class="more" style="width: 160px;display: inline-block;">{{item.linker}} | {{item.email}}</span></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最近联系人:"  class="specLine">
              <el-checkbox-group v-model="recentCheck">
                <el-checkbox v-show="recentCheckList.length==0" disabled="disabled">暂无最近联系人</el-checkbox>
                <el-checkbox v-for="item,index in recentCheckList" :key="index" :label="item"   :title="item.linker+item.email">
                  <span  class="more" style="width: 160px;display: inline-block;">{{item.linker}} | {{item.email}}</span>
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 底部按钮-->
      <div class="dialog-footer" align="center">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" size="mini" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {queryCustMark, queryCustType} from '@/api/customer'
    import {getContact,getRecentMan} from '@/api/mail/make'

    export default {
        name: "DialogConcat",
        data() {
            return {
                dialogVisible: false,
                title: '',
                selectList: [],
                form: {
                    query: '',//关键字
                    markId: '',//标签
                    typeId: '',//客户分组ID
                    typeIdWeb: [],//分组选择
                },
                checkList: [],//搜索结果
                recentCheckList: [],//最近联系人
                recentCheck:[],//选中
                searchList:[],//搜索结果
                marketList: [],//客户标签
                treeOptions: [],//客户分组
                type:1,
                loading:false
            }
        },
        methods: {
            init(type,selectEmail) {
                //获取最近联系人
                this.getRecentMan();
                this.recentCheck =[];
                this.checkList=[];
                let msg;
                this.type=type;
                if (type == 1) {
                    msg = '收件人'
                } else if (type == 2) {
                    msg = '抄送'
                } else if (type == 3) {
                    msg = '密送'
                }
                this.title = msg;
                if(this.$refs['form']){
                    this.$refs['form'].resetFields()
                }
                this.getLabel();
                this.getGroup();
            },
            reset(){
                this.form.typeId='';
                this.$refs['form'].resetFields()
            },
            submit() {
                //提交结果
                const result = this.checkList.concat(this.recentCheck)
                this.$emit('getConcat', this.title,result)
                this.dialogVisible = false;
            },
            getRecentMan(){
                getRecentMan().then(res => {
                    if (res.data.success) {
                        this.recentCheckList = res.data.data;
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //搜索
            search() {
                this.loading=true;
                getContact(this.form).then(res => {
                    this.loading=false;
                    if (res.data.success) {
                        this.searchList = res.data.data;
                    }
                }).catch(err => {
                    this.loading=false;
                })
            },
            handleChange(file, fileList) {
                this.form.typeId = file[file.length - 1];
            },
            //客户标签
            getLabel() {
                queryCustMark().then(res => {
                    if (res.data.success) {
                        this.marketList = res.data.data;
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //客户分组
            getGroup() {
                queryCustType().then(res => { // 当前用户的分组
                    if (res.data.success) {
                        this.treeOptions = res.data.data
                        this.dialogVisible = true;
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
  .el-dialog__wrapper.dialog-concat {
    .el-checkbox-group {
      border-radius: 10px;
      padding: 0 10px;
      background-color: #f5f5f5;
      height: 200px;
      overflow-y: scroll;
      label.el-checkbox{
        display: flex;
        align-items: center;
        margin-top: 8px;
      }
    }

    .el-dialog__body {
      padding: 0 20px 0 20px !important;
    }

    .el-dialog__footer {
      padding: 0 20px 20px;
    }
  }
</style>
